<template>
	<view class="menus">
		<uni-segmented-control style-type="text" :current="current" :values="values"
			@clickItem="changeCurrent"></uni-segmented-control>
	</view>
	<view class="main">

		<scroll-view scroll-y="true" class="info">
			<a id="elenews"></a>
			<!-- 新闻区 -->
			<view class="title">{{ info.title }}</view>
			<view v-html="info.content"></view>
			<view class="source">{{info.source}} {{info.postTime}}</view>
			<a id="elereply"></a>
			<!-- 评论区 -->
			<view class="">
				<view class="reply" v-for="d in list">

					<view class="logo" :style="`background-image: url(${tools.userlogo(d.user.user.id)});`"></view>
					<view class="">

						<view class="">
							{{d.content}}
						</view>

						<view class="reply-info">
							{{tools.formatDate(d.lastupdate)}}
						</view>

					</view>

				</view>

			</view>
		</scroll-view>

		<view style="height: 2rem;">
		</view>

		<!-- 发布评论区域 -->
		<view class="reply-form">

			<uni-easyinput v-model="content" placeholder="评论内容" />
			<uni-icons @click="replyNews" type="paperplane" size="35"></uni-icons>

		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		api,
		tools
	} from '@/js/api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'


	const content = ref('')

	const replyNews = () => {
		uni.showLoading({
			title: '发表评论中...'
		})
		api.post(`/autodata/info/news/reply/${id.value}`, {
			content: content.value
		}, (data) => {
			uni.hideLoading()
			uni.showToast({
				title: data.message
			})
			query()
		})
	}

	const current = ref(0)
	const values = ref(['详情', '评论'])

	const changeCurrent = (event) => {
		current.value = event.currentIndex
		if (event.currentIndex == 0) {
			scrollTo('#elenews')
		} else if (event.currentIndex == 1) {
			scrollTo('#elereply')
		}
	}

	const scrollTo = (selector) => {
		uni.pageScrollTo({
			selector: selector
		})
	}

	const id = ref(-1)

	onLoad((event) => {
		id.value = event.id
		query()
	})

	const page = ref({
		"pageSize": 10,
		"pageNumber": 1,
	})
	const info = ref({})
	const list = ref([])

	const query = () => {
		api.get(
			`/autodata/query/newsdetail/${id.value}/${page.value.pageSize}/${page.value.pageNumber}`, {}, (
			data) => {
				if (data.success) {
					page.value = data.data.pageBean
					info.value = data.data.info
					list.value = data.data.list
				} else {
					uni.showModal({
						content: data.message,
						title: '查询失败',
						complete: () => {
							uni.navigateBack()
						}
					})
				}
			}
		)

	}
</script>

<style scoped>
	.main {
		padding: 1rem;
	}

	.title {
		font-weight: bold;
	}

	.source {
		font-size: 0.8rem;
		color: #666;
	}

	.info {
		margin: 0.5rem 0px;
	}

	.info:deep(p) {
		text-indent: 1em;
		line-height: 1.5;
	}

	.menus {
		position: sticky;
		position: -webkit-sticky;
		top: calc(var(--window-top));
		background-color: #ffffff;
		z-index: 10;
	}

	.logo {
		width: 3rem;
		height: 3rem;
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 50%;
		margin-right: 0.5rem;
	}

	.reply {
		display: flex;
		padding: 1rem 0px;
	}

	.reply-info {
		padding: 0.5rem 0px;
		color: #666;
	}

	.reply-form {
		background-color: #ffffff;
		position: fixed;
		left: 0px;
		bottom: 0px;
		width: calc(100vw - 1rem);
		padding: 0.5rem;
		display: flex;
		align-items: center;
	}
</style>